<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="得分表" name="score">
            <el-table :data="scoreData" border style="width: 100%" :max-height="maxheight" size="medium">
                <el-table-column min-width="120" prop="dmmc" label="断面" show-overflow-tooltip />
                <el-table-column prop="szmb" label="水质目标" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="szlb" label="当月水质" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="quanzhong" label="权重" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="score" label="得分" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="xiaoji" label="小计" :formatter="formatter" show-overflow-tooltip />
                <el-table-column min-width="400" prop="reason" label="说明" show-overflow-tooltip />
            </el-table>
            <div v-show="scoreData.length > 0" class="el-table el-table--fit el-table--medium"
                style="width: 100%;border-left: 1px solid #EBEEF5;">
                <div class="el-table__footer-wrapper">
                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__footer" style="width: 100%;">
                        <tbody class="has-gutter">
                            <tr>
                                <td class="el-table__cell">
                                    <div class="cell" style="font-weight: bold;"><span>得分总计：</span><span>{{ totalscore
                                            }}</span></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="扣分表" name="deduction">
            <el-table :data="deductionData" border style="width: 100%" :max-height="maxheight" size="medium">
                <el-table-column min-width="120" prop="dmmc" label="断面" show-overflow-tooltip />
                <el-table-column prop="szmb" label="水质目标" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="szlb" label="当月水质" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="quanzhong" label="权重" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="score" label="扣分" :formatter="formatter" show-overflow-tooltip />
                <el-table-column min-width="400" prop="reason" label="说明" show-overflow-tooltip />
            </el-table>
            <div v-show="deductionData.length > 0" class="el-table el-table--fit el-table--medium"
                style="width: 100%;border-left: 1px solid #EBEEF5;">
                <div class="el-table__footer-wrapper">
                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__footer" style="width: 100%;">
                        <tbody class="has-gutter">
                            <tr>
                                <td class="el-table__cell">
                                    <div class="cell"><span>扣分总计：</span><span>{{ totaldeduction }}</span></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="其他表" name="other">
            <el-table :data="otherData" border style="width: 100%" :max-height="maxheight" size="medium">
                <el-table-column min-width="120" prop="dmmc" label="断面" show-overflow-tooltip />
                <el-table-column prop="szmb" label="水质目标" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="szlb" label="当月水质" :formatter="formatter" show-overflow-tooltip />
                <el-table-column prop="quanzhong" label="权重" :formatter="formatter" show-overflow-tooltip />
                <el-table-column min-width="400" prop="reason" label="说明" show-overflow-tooltip />
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'score',
            maxheight: 500,
            scoreData: [], //得分数据
            deductionData: [], //扣分数据
            otherData: [], //其他数据
            totalscore: 0, //所得分总和
            totaldeduction: 0, //所扣分总和
        }
    },
    created() {
        const height = window.innerHeight - 275;
        this.maxheight = height;
    },
    methods: {
        init(date, xzqhdm) {
            this.$api.getMonthScoreDeduction(date, xzqhdm).then((res) => {
                console.log('getMonthScoreDeduction---', res);
                let data = res.data.data;
                this.scoreData = data;
                let scoreArray = [], deductionArray = [], otherArray = [];
                data.forEach(element => {
                    if (!element.szlb) {
                        otherArray.push(element);
                    } else if (element.score >= 0) {
                        scoreArray.push(element);
                    } else if (element.score < 0) {
                        deductionArray.push(element);
                    }
                });
                this.scoreData = scoreArray;
                this.deductionData = deductionArray;
                this.otherData = otherArray;
                let scoresum = scoreArray.reduce((total, obj) => total + obj.score, 0);
                this.totalscore = scoresum;
                let deductionsum = deductionArray.reduce((total, obj) => total + obj.score, 0);
                this.totaldeduction = deductionsum;
            })
        },
        formatter(row, column, cellValue, index) {
            if (cellValue == null || cellValue == 'null') {
                return '--';
            } else {
                return cellValue;
            }
        },
    }
}
</script>